<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>采集工作量统计</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/easyui/easyui_my.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/css.css" />

    <script type="text/javascript" src="${ctx}/js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="${ctx}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx }/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${ctx}/js/common.js"></script>
    <script type="text/javascript" src="${ctx}/js/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="${ctx}/js/highcharts/modules/exporting.js"></script>
    <script type="text/javascript">
        var exportData="";
        $(function(){
            Highcharts.setOptions({
                lang: {
                    printChart:"打印图表",
                    downloadJPEG: "下载JPEG 图片" ,
                    downloadPDF: "下载PDF文档"  ,
                    downloadPNG: "下载PNG 图片"  ,
                    downloadSVG: "下载SVG 矢量图" ,
                    exportButtonTitle: "导出图片"
                }
            });
            //设置日期初始值
            $("#startTime").datetimebox("setValue",getDatex(7));
            $("#endTime").datetimebox("setValue",getDatex1(-1));
        });

        $(function(){
            initTable();
        });
        function initTable(){
            var startTimeStr= $("#startTime").combobox('getValue');
            var endTimeStr= $("#endTime").combobox('getValue');
            $.ajax({
                url: "${ctx}/cxtj/findgzl.htm",
                type: 'post',
                data: {startTime:startTimeStr,
                    endTime:endTimeStr},
                dataType: "json",
                success:function(data){
                    exportData=data;
                    // highcharts2(data.rows);//折线图
                    highcharts(data);//柱状图
                    createAllContent1(data);
                }
            });
        }
        function createAllContent1(data){
        	$("#TableData").empty();//清空原始数据
        	var tableBodyStr = "";
        	if(data==""){
        		tableBodyStr+="";
        	}else{
        			tableBodyStr+="<tr>";
        			tableBodyStr+="<td height=\"26\" align=\"center\" class=\"dashujutable1_top\">采集人</td>";
        			tableBodyStr+="<td align=\"center\" class=\"dashujutable1_top\">采集量</td>";
        		$.each(data,function(i,n){
        			tableBodyStr+="<tr>";
        			if(i%2==0){
        				tableBodyStr+="<td height=\"28\" class=\"dashujutable1_nr1\"  align=\"center\">"+n.cjr+"</td>";
        				tableBodyStr+="<td class=\"dashujutable1_nr1\" align=\"center\">"+n.ycjTotal+"</td>";
        			}else{
        				tableBodyStr+="<td height=\"28\" class=\"dashujutable1_nr2\"  align=\"center\">"+n.cjr+"</td>";
        				tableBodyStr+="<td class=\"dashujutable1_nr2\" align=\"center\">"+n.ycjTotal+"</td>";
        			}
        			tableBodyStr+="</tr>";
        	});
        		
        					
        	}
        	$("#TableData").html(tableBodyStr);
        } 
        //布控类型统计饼图
        var eventData = {};//布控类型统计图点击事件--数据
        function highcharts2(data) {
            var seriesData = [];
            for (var i = 0; i < data.length; i++) {
                seriesData[i] = {
                    name:data[i].tjmc,
                    y : data[i].sum,
                    tjbh:data[i].tjbh,
                    sum1:data[i].sum1,
                    sum2:data[i].sum2,
                    sum3:data[i].sum3,
                    sum4:data[i].sum4,
                    sum5:data[i].sum5
                };
            }
            eventData=seriesData[0];
            $('#picDiv1').highcharts({
                chart : {
                    type : 'pie',
                    //height : 283,
                    //width : 370,
                    options3d : {
                        enabled : false,
                        alpha : 45
                    }
                },
                title : {
                    text : "<span>布控类型<br>统计图</span>",
                    margin:5,
                    style:{"color": "#ff8f22"/*,"fontSize": "14px"*/},
                    verticalAlign:"middle",
                    y:-5
                },
                subtitle : {
                    text : ''
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}</b><br/>所占比例:<b>{point.percentage:.1f} %</b>'
                },
                exporting: {
                    filename: '',
                    sourceWidth: 1000,
                    sourceHeight: 550,
                    url: 'http://localhost:<%=request.getLocalPort()%>/HeighChartsExportServlet'
                },
                credits : {
                    enabled : false
                },
                plotOptions : {
                    pie : {
                        allowPointSelect: true,
                        innerSize : 120,  //饼图内半径
                        depth : 45,
                        dataLabels: {
                            enabled: true,
                            //format: '{point.name}',
                            formatter: function(){   //重写point.name
                                if(this.point.name.length>5) {
                                    return this.point.name.substr(0,4)+"...";
                                }else{
                                    return this.point.name;
                                }
                            },
                            style: { //标签文字样式
                                //fontSize:"10px"
                            },
                            distance : 0   //标签文字与饼图的距离
                        }
                    },
                    series: {
                        cursor: 'pointer',
                        events: {
                            click: function(event) {
                                highcartsEvent(event.point);//布控类型统计图点击事件
                            }
                        }
                    }
                },
                series : [ {
                    name : '数量',
                    data : seriesData
                } ]
            });
        }
        //布控类型统计图点击事件
        function highcartsEvent(data){
            var seriesData1 = [];
            var seriesData2 = [];
            seriesData1[0]={name:'有效数量',y:data.sum1};
            seriesData1[1]={name:'撤销数量',y:data.sum2};
            seriesData2[0]={name:'待审核数量',y:data.sum3};
            seriesData2[1]={name:'已通过数量',y:data.sum4};
            seriesData2[2]={name:'废弃数量',y:data.sum5};
            $("#picName").html(data.name+"布控状态统计");
            highcharts3("布<br>控<br>状<br>态<br>统<br>计<br>图","picDiv2_1",seriesData1);
            highcharts3("审<br>核<br>状<br>态<br>统<br>计<br>图","picDiv2_2",seriesData2);
        }
        //布控类型状态统计图
        function highcharts3(title,divid,seriesData){
            $('#' + divid).highcharts({
                chart : {
                    type : 'pie'
                },
                title: {
                    text: title,
                    style:{"fontSize": "14px"},
                    align: 'left',
                    floating:true,
                    x:40,
                    y:20
                },
                tooltip: {
                    pointFormat:'{series.name}: <b>{point.y}</b><br/>所占比例: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        shadow: false,
                        center: ['50%', '50%'],
                        dataLabels: {
                            enabled: true,
                            distance: 5   //标签文字与饼图的距离
                        }
                    }
                },
                exporting: {
                    filename: '',
                    sourceWidth: 1000,
                    sourceHeight: 550,
                    url: 'http://localhost:<%=request.getLocalPort()%>/HeighChartsExportServlet'
                },
                credits : {
                    enabled : false
                },
                series: [{
                    name: '数量',
                    data: seriesData
                }]
            });
        }
        //采集统计柱状图
        function highcharts(data) {
            var timeStr = $("#startTime").combobox('getValue') + " 至 " + $("#endTime").combobox('getValue');
            var categories = [];
            var seriesData = [];
            var seriesData1 = [];
            var seriesData2 = [];
            var seriesData3 = [];
            var seriesData4 = [];
            var seriesData5 = [];
            for(var i=0;i<data.length;i++){
                seriesData1[i] = data[i].ycjTotal;
                /*  seriesData2[i] = data[i].cjdcjTotal;
                 seriesData3[i] = data[i].cjdshTotal;
                 seriesData4[i] = data[i].cjyshTotal;
                 seriesData5[i] = data[i].cxcjTotal; */
                categories[i] = data[i].cjr;
            }
            seriesData=[{name: '采集量', data: seriesData1}];
            /* seriesData=[{name: '总量', data: seriesData1}
             ,{name: '待采集量', data: seriesData2}
             ,{name: '采集待审核量', data: seriesData3}
             ,{name: '采集已审核', data: seriesData4}
             ,{name: '重新采集量', data: seriesData5}]; */

            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                exporting: {
                    enabled:false, //去除右上角下载按钮
                    filename: '',
                    sourceWidth: 1000,
                    sourceHeight: 800,
                    url: 'http://localhost:<%=request.getLocalPort()%>/HeighChartsExportServlet'
                },
                title: {
                    text: '人员档案采集工作量统计图'
                },
                subtitle: {
                    text: timeStr,
                    x: -20
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    categories: categories,
                    labels: {
                        rotation: -45
                    }
                },
                yAxis: {
                    allowDecimals:false,
                    min: 0,
                    title: {
                        text: '采集数量'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} 条</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: seriesData
            });
        }
        /*     //图形选择
         $(function() {
         $('#txqh').combobox({
         valueField: 'id',
         textField: 'text',
         panelHeight:'auto',
         onSelect:function(selectValue){
         if(selectValue.id==1){
         $("#container1").hide();
         $("#container").show();
         }else{
         $("#container").hide();
         $("#container1").show();
         highcartsEvent(eventData);//布控类型统计图点击事件
         }
         },
         data:[{id:'1',text:'柱状图'},
         {id:'2',text:'饼状图'}]
         });
         }); */
        function export1(flage){
            var options=$('#TableData').datagrid('getPager').data("pagination").options;
            var pageNumber=options.pageNumber;//当前页数
            var pageSize=options.pageSize;//分页大小
            var total=options.total;//记录总数
            var queryParams=$('#TableData').datagrid('options').queryParams;
            if(total==0){//数据为空时，不能导出
                alert("暂无数据，无法导出！");
            }else{
                $("#page").val(pageNumber);
                $("#pageSize").val(pageSize);
                $("#exp_startTime").val(queryParams.startTime);
                $("#exp_endTime").val(queryParams.endTime);
                $("#exp_bkr").val(queryParams.bkr);
                $("#exp_flage").val(flage);
                $("#exportFrom").submit();
            }
        }
        function bgxx(){
            $("#tableDiv").show();
            $("#picDiv").hide();
            $("#TableData").datagrid("resize");
        }
        function stxx(){
            $("#picDiv").show();
            $("#tableDiv").hide();
            highcharts2(exportData);//折线图
            initBkslZzt(exportData)//柱状图
        }
    </script>
</head>
<body>
<div data-options="region:'north',height:72,border:false" style="padding-left:10px;padding-right: 10px;padding-top: 5px;">
    <div class="xinxichaxunkuangz1">
        <div class="dashujtiaojianxuanxiangkuan">
            <div class="dashujtiaojianxuanxiangkuan_lie">
                <div class="tiaojian_key">开始时间：</div>
                <div class="tiaojian_values" style="width:1000px">
                    <ul class="tiaojian_values_limian">
                        <li>
              <span id="startTimeDiv" class="textbox combo" style="height: 20px">
                <input id="startTime" type="text" name="startTime"  class="easyui-datetimebox shurukuangkais" style='width: 140px;height: 20px'/>
              </span>
                        </li>
                        <li><span class="buchongdbiaotdsw">结束时间：</span>
                            <span id="endTimeDiv" class="textbox combo" style="height: 20px">
                <input id="endTime" type="text" name="endTime"  class="easyui-datetimebox shurukuangkais" style='width: 140px;height: 20px' />
              </span>
                        </li>
                        <!--        <li><span class="buchongdbiaotdsw">布控人：</span>
                                        <input id="bkr" type="text" name="bkr" class="shurukuangkais"/>
                                    </li>
                                    <li><span class="buchongdbiaotdsw">图形选择：</span>
                                      <input id="txqh" name="txqh" value="1" style="width:100px"/>
                                    </li> -->
                    </ul>
                </div>
            </div>
            <div class="chaxunchongzhianniu">
                <a href="javascript:initTable()" class="sousuocx">查询</a>
                <%--<a href="###" class="congzhim">重置</a>--%>
            </div>
        </div>
    </div>
</div>
<div data-options="region:'center',border:false" style="padding-left:10px;padding-right: 10px;overflow-y:auto" >
    <div class="easyui-layout xinxichaxunkuangz2" data-options="fit:false,border:false">
        <!-- <div class="tupianqiehuantop" data-options="region:'north',border:false" >
          <span class="chaxunjieguosd">搜索结果</span>
        </div> -->
        <!-- <div id="tableDiv" style="display: none" data-options="region:'center',border:false">
            <table id="TableData" data-options="fit:true"></table>
            <a href="javascript:void(0)" id="exportButton"  name="exportButton" class="easyui-splitbutton" DATA-OPTIONS="menu:'#mm',iconCls:'icon-excel'" ><b>导出Excel</b></a>
            <div id="mm" style="width:100px;">
                <div DATA-OPTIONS="iconCls:'icon-excel' " onClick="export1(1)">导出当前页</div>
                <div DATA-OPTIONS="iconCls:'icon-excel' " onClick="export1(2)">导出全部</div>
            </div>
        </div> -->
        <div id="picDiv" class="tongyi_zhongjiantu1">
            <div id="container" style="height: 100%;width: 100%"></div>
        </div>
    </div>
     <table border="0" cellpadding="0" cellspacing="0" width="100%" class="dashujutable1" style="margin:12px 0 86px 0;padding: 0 20px; " id="TableData">
	      <tbody>
	      </tbody>
	</table>
</div>
<!-- 表格导出 -->
<div style="display: none;">
    <form id="exportFrom" name="exportFrom" action="${ctx}/export/export_bklx.htm" method="post" style="visibility: hidden; display: none;">
        <input id="page" name="page" type="hidden">
        <input id="pageSize" name="pageSize" type="hidden">
        <input id="exp_startTime" name="exp_startTime" type="hidden" >
        <input id="exp_endTime" name="exp_endTime" type="hidden" >
        <input id="exp_bkr" name="exp_bkr" type="hidden" >
        <input id="exp_flage" name="exp_flage" type="hidden" >
    </form>
</div>
<!-- 表格导出 -->
</body>
</html>